import React, { Component } from 'react';
import style from './maincontent.module.css';
import { Select,Icon,Table,Menu,Dropdown,Input,Switch } from 'antd';
import { NavLink } from 'react-router-dom';
import $ from 'jquery';
const { Option } = Select;

class MainContent extends Component {
  constructor(props) {
    super(props);
  }

  state = {
    selectedRowKeys: [], // Check here to configure the default column
    columns:[],
    selectlength:0,
    oldtabMod:'',
    data:[],
    datalength:102,
    datalimit:10,
    act:'',
  };

  onSelectChange = selectedRowKeys => {
    // console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  nameBlur=()=>{
    console.log('改标题')
  }

  changeDisplay=(e)=>{  
    console.log('改显示隐藏',e)
  }

  histBlur=()=>{
    console.log('改点击量')
  }

  orderstBlur=()=>{
    console.log('改排序')
  }

  componentDidMount() {  
    this.props.setcolumnsRef(this)
    this.gocolumns(this.props.tabMod)
  }

  shouldComponentUpdate(nextProps,nextState){
    if(nextProps.act != this.state.act){
      return true;
    }else{
      return false;
    }
  }

  componentDidUpdate(){
    this.getData(this.props.act)
  }

  getData=(act)=>{  //请求数据
    const that = this
    $.ajax({
      url:'/product',
      dataType:'json',
      type:'GET',
      data:{
        act
      },
      success(e){
        let data = e
        for(let obj of data){
          obj.action = [
            {
              name:'预览',
              preview:true
            },
            {
              name:'修改',
              url:{
                pathname:'/home/modify/id/',
                state:{
                  ifrepathname:true,
                  repathname:'/home'+ that.props.tabUrl,
                  p_key:''
                }
              }
            },
            {
              name:'删除',
              id:2,
              pid:1,
            }
          ]
        }
        that.setState({
          data,
          act
        })
      }
    })
  }

  gocolumns=(tabMod)=>{   //设置columns
    //预览的下拉组件
    const menu_proview = (  
      <Menu className={style.menu_proview}>
        <Menu.Item>
          <a href="" target='_blank'>pc预览</a>
        </Menu.Item>
        <Menu.Item>
          <a href="" target='_blank'>手网预览</a>
        </Menu.Item>
      </Menu>
    )
    switch (tabMod) {
      case 'normal':
        this.setState({
          // data,
          columns: [
            {
              title:'编号',
              dataIndex:'id'
            },
            {
              title: '标题名',
              dataIndex: 'name',
              render:(e)=>(<Input onBlur={this.nameBlur.bind(this)} className={style.name} title={e} placeholder={e} />),
            },
            {
              title: '更新时间',
              dataIndex: 'time',
              render:(time)=>(time.text),
              sorter:(a,b)=>(a.time.timestamp - b.time.timestamp)
            },
            {
              title: '操作',
              dataIndex: 'action',
              render:obj=>(<ul className={style.action_ul}>
                {
                  obj.map((e,index)=>e.preview?'':(<li className={e.preview?style.preview:''} key={index}>
                    {e.name=='修改'?<NavLink to={e.url}>{e.name}</NavLink>:<a href={e.url} id={e.id} pid={e.pid} className={style.action}>{e.name}</a>}
                    </li>))
                }
              </ul>)
            },
          ]
        })
      break;
      case 'product':
        this.setState({
          // data,
          selectedRowKeys:[],
          columns: [
            {
              title:'编号',
              dataIndex:'id'
            },
            {
              title:'列表图',
              dataIndex:'img',
              render:(e)=>(<img className={style.columns_img} imgurl={e} src={e} alt=""/>)
            },
            {
              title: '标题名',
              dataIndex: 'name',
              render:(e)=>(<Input onBlur={this.nameBlur.bind(this)} className={style.name} title={e} placeholder={e} />),
            },
            {
              title: '分类',
              dataIndex: 'sort',
            },
            {
              title: '是否显示',
              dataIndex: 'ifdisplay',
              // render:obj=>(<p onClick={this.changeDisplay.bind(this,obj)} className={style.ifdisplay}>{obj.map(e=>(e.default?e.mod:''))}</p>)
              render:(obj,data)=>(<Switch onChange={this.changeDisplay.bind(this,data.id)} checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="close" />} defaultChecked />) 
            },
            {
              title: '点击量',
              dataIndex: 'hits',
              render:(e)=>(<Input onBlur={this.histBlur.bind(this)} className={style.hits} placeholder={e} />),
              sorter:(a,b)=>(a.orders - b.orders)
            },
            {
              title: '排序',
              dataIndex: 'orders',
              render:(e)=>(<Input onBlur={this.orderstBlur.bind(this)} className={style.orders} placeholder={e} />),
              sorter:(a,b)=>(a.orders - b.orders)
            },
            {
              title: '更新时间',
              dataIndex: 'updatatime',
              render:(time)=>(this.changetime(time)),
              sorter:(a,b)=>(a.time.timestamp - b.time.timestamp)
            },
            {
              title: '操作',
              dataIndex: 'action',
              render:obj=>(<ul className={style.action_ul}>
                {
                  obj.map((e,index)=>(<li className={e.preview?style.preview:''} key={index}>
                    {e.preview?<Dropdown trigger={['click']} overlay={menu_proview}><a>{e.name}<Icon type="down" /></a></Dropdown>:e.name=='修改'?<NavLink to={e.url}>{e.name}</NavLink>:<a href={e.url} id={e.id} pid={e.pid} className={style.action}>{e.name}</a>}
                    </li>))
                }
              </ul>)
            },
          ]
        })  
      break;
      case 'news':
        this.setState({
          // data,
          columns: [
            {
              title:'编号',
              dataIndex:'id'
            },
            {
              title: '标题名',
              dataIndex: 'name',
              render:(e)=>(<Input onBlur={this.nameBlur.bind(this)} className={style.name} title={e} placeholder={e} />),
            },
            {
              title: '分类',
              dataIndex: 'sort',
            },
            {
              title: '是否显示',
              dataIndex: 'ifdisplay',
              // render:obj=>(<p onClick={this.changeDisplay.bind(this,obj)} className={style.ifdisplay}>{obj.map(e=>(e.default?e.mod:''))}</p>)
              render:obj=>(<Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="close" />} defaultChecked />)
            },
            {
              title: '点击量',
              dataIndex: 'hits',
              render:(e)=>(<Input onBlur={this.histBlur.bind(this)} className={style.hits} placeholder={e} />),
              sorter:(a,b)=>(a.orders - b.orders)
            },
            {
              title: '排序',
              dataIndex: 'orders',
              render:(e)=>(<Input onBlur={this.orderstBlur.bind(this)} className={style.orders} placeholder={e} />),
              sorter:(a,b)=>(a.orders - b.orders)
            },
            {
              title: '更新时间',
              dataIndex: 'time',
              render:(time)=>(time.text),
              sorter:(a,b)=>(a.time.timestamp - b.time.timestamp)
            },
            {
              title: '操作',
              dataIndex: 'action',
              render:obj=>(<ul className={style.action_ul}>
                {
                  obj.map((e,index)=>(<li className={e.preview?style.preview:''} key={index}>
                    {e.preview?<Dropdown trigger={['click']} overlay={menu_proview}><a>{e.name}<Icon type="down" /></a></Dropdown>:e.name=='修改'?<NavLink to={e.url}>{e.name}</NavLink>:<a href={e.url} id={e.id} pid={e.pid} className={style.action}>{e.name}</a>}
                    </li>))
                }
              </ul>)
            },
          ]
        })   
      break;
    }
  }

  changetime=(ntime)=>{
    var time = new Date(ntime)
    return time.getFullYear()+'年'+time.getMonth()+'月'+time.getDate()+'日'+time.getHours()+'时'+time.getMinutes()+'分'+time.getSeconds()+'秒';
  }

  render() { 
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      hideDefaultSelections: true,
      selections: [
        {
          key: 'all-data',
          text: '全选',
          onSelect: () => {
            this.setState({
              selectedRowKeys: [...Array(this.state.datalimit).keys()], 
            });
          },
        },
        {
          key: 'odd',
          text: '选择偶数项',
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
              if (index % 2 !== 0) {
                return false;
              }
              return true;
            });
            this.setState({ selectedRowKeys: newSelectedRowKeys });
          },
        },
        {
          key: 'even',
          text: '选择奇数项',
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
              if (index % 2 !== 0) {
                return true;
              }
              return false;
            });
            this.setState({ selectedRowKeys: newSelectedRowKeys });
          },
        },
      ],
    };

    return (
      <div className={style.content}> 
        <div className={style.add}>
          <a className={style.add_a} href="">+ 添加</a>
          <Select
            labelInValue
            placeholder="操作"
            style={{ width: 88 }}
          >
            <Option value="move">移至</Option>
            <Option value="copy">复制</Option>
          </Select>
        </div>
        <div className={style.msg}>
          <Icon style={{color:'#1890FF'}} type="exclamation-circle" theme="filled" />
          <span className={style.msg_title}>已选择<p>{this.state.selectedRowKeys.length}项</p></span>
          <div className={style.msg_delete}>删除</div>
          <div className={style.msg_alldata}>一共<p>{this.state.datalength}项</p></div>
        </div>
        <div className={style.tab}>
          <Table rowKey='id' rowSelection={rowSelection} columns={this.state.columns} dataSource={this.state.data} />
        </div>
      </div>
    );
  }
}
 
export default MainContent;